<style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>

<main class="businessCreate mlr-24" style="padding-bottom:100px" id="following">
    <div class="font-16 line-height-56 border-b color-999">跟进项目</div>
    <div class="font-14 blockTitle">跟进信息</div>
    <div>
        <div class="dy-flex line-height-34" style="margin-top:7px">
            <div class="block_C_title">跟进时间:</div>
            <div class="pull-left line-height-34  relative dy-flex" style="width:312px;margin-right: 120px;">
                <web-calendar v-model="followup_time" tips=""></web-calendar>
                <input type="number" class="time_hours_min form-control" style="margin-left: 10px;" placeholder="时"
                    v-model="followup_time_H" oninput="if(value>24)value = 24">
                <input type="number" class="time_hours_min form-control" style="margin-left: 10px;" placeholder="分"
                    v-model="followup_time_M" oninput="if(value>60)value = 60">
            </div>
            <div style="width: 76px">跟进方式:</div>
            <div style="width:240px">
                <div class="select-ul">
                    <span class="select-name br-4 box-i-shadow">请选择</span>
                    <ul>
                        <li v-for="(item, index) in channelType" @click="selectFollowType(item.dictCode)">
                            {{item.dictName}}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="dy-flex line-height-34 mt-10" style="margin-top:12px">
            <div class="block_C_title">跟进记录:</div>
            <div class="block_C_text">
                <textarea class="form-control" rows="4" v-model="followup_memo" placeholder="非必填"></textarea>
            </div>
        </div>

        <div class="dy-flex line-height-34" style="margin-top:12px">
            <div class="block_C_title">计划跟进时间:</div>
            <div class="pull-left line-height-34  relative dy-flex" style="width:312px;margin-right: 120px;">
                <web-calendar v-model="plan_followup_time" tips=""></web-calendar>
                <input type="number" class="time_hours_min form-control" style="margin-left: 10px;" placeholder="时"
                    v-model="plan_followup_time_H" oninput="if(value>24)value = 24">
                <input type="number" class="time_hours_min form-control" style="margin-left: 10px;" placeholder="分"
                    v-model="plan_followup_time_M" oninput="if(value>60)value = 60">
            </div>
        </div>
        <div class="dy-flex line-height-34 mt-10" style="margin-top:12px">
            <div class="block_C_title">计划跟进内容:</div>
            <div class="block_C_text">
                <textarea class="form-control" rows="4" v-model="plan_followup_content" placeholder="非必填"></textarea>
            </div>
        </div>
        </section>


        <div class="isUnfold" @click="isUnfold = !isUnfold">
            {{isUnfold?'收起':'展开'}}项目详情<span class="icon" :class="isUnfold?'icon-put-up':'icon-put-out'"></span>
        </div>

        <div v-show="isUnfold">
            <div class="mt-15">
                <p class="font-14 color-gray">基本信息</p>
                <div class="clearfix mt-10">
                    <div class="pull-left color-666 mr-10 line-height-34">渠道分类:</div>
                    <div class="pull-left color-666">
                        <div class="select-ul" style="width:240px;">
                            <span class="select-name br-4 box-i-shadow" ref="channelCate">请选择</span>
                            <ul>
                                <li v-for="item in channelCateArr" @click="selectedCC(item)">{{ item.dictName }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="clearfix mt-10">
                    <div class="pull-left color-666 mr-10 line-height-34">渠道名称:</div>
                    <div class="pull-left color-666">
                        <div class="select-ul" style="width:240px;">
                            <span class="select-name br-4 box-i-shadow" ref="channelName">非必选</span>
                            <ul>
                                <li v-for="item in channelNameArr" @click="selectedCN(item)">{{ item.dictName }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="clearfix mt-10">
                    <div class="pull-left color-666 mr-10 line-height-34">过程管理:</div>
                    <div class="pull-left color-666">
                        <div class="select-ul" style="width:240px;">
                            <span class="select-name br-4 box-i-shadow" ref="processManagement">非必选</span>
                            <ul>
                                <li v-for="item in processManagementArr" @click="selectedPM(item)">
                                    {{ item.dictName }}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-15 pt-15">
                <div class="clearfix">
                    <div class="pull-left relative init-hover1">
                        <span class="color-gray">主要信息</span>
                        <span class="icon-Gm-explain color-gray"></span>
                        <div class="init-tips1">默认只展开必填项目，如需填写其他非必填项目，请点击右侧展开按钮。</div>
                    </div>
                    <div class="pull-right">
                        <a href="javascript:;" @click="showTable = !showTable">{{ showTable ? '收起' : '展开' }}</a>
                    </div>
                </div>
                <div class="clearfix mt-10" style="margin-right: 150px;">
                    <div class="clearfix pull-left" style="margin-right: 150px;">
                        <div class="pull-left line-height-34" style="width: 80px;">项目名称:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="text" class="form-control" v-model="projectName">
                        </div>
                    </div>
                    <div class="clearfix pull-left" v-show="showTable">
                        <div class="pull-left line-height-34" style="width: 80px;">项目性质:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="text" class="form-control" v-model="projectNature">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" v-show="showTable" style="margin-right: 150px;">
                        <div class="pull-left line-height-34" style="width: 80px;">占地面积:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="number" class="form-control" placeholder="非必填" v-model="areaCoveredAcreage">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" v-show="showTable">
                        <div class="pull-left line-height-34" style="width: 80px;">建筑面积:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="number" class="form-control" placeholder="非必填"
                                v-model="buildingCoveredAcreage">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" v-show="showTable" style="margin-right: 150px;">
                        <div class="pull-left line-height-34" style="width: 80px;">总楼层:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="number" class="form-control" placeholder="非必填" v-model="floorCount">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" v-show="showTable">
                        <div class="pull-left line-height-34" style="width: 80px;">得房率:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="number" class="form-control" placeholder="非必填" v-model="roomRates">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" v-show="showTable" style="margin-right: 150px;">
                        <div class="pull-left line-height-34" style="width: 80px;">标准层高:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="number" class="form-control" placeholder="非必填" v-model="standardStoreyHeight">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" v-show="showTable">
                        <div class="pull-left line-height-34" style="width: 80px;">电梯数:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="number" class="form-control" placeholder="非必填" v-model="liftCount">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" v-show="showTable" style="margin-right: 150px;">
                        <div class="pull-left line-height-34" style="width: 80px;">车位:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="number" class="form-control" placeholder="非必填" v-model="parkingCount">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" v-show="showTable">
                        <div class="pull-left line-height-34" style="width: 80px;">空调:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="number" class="form-control" placeholder="非必填" v-model="airConditionerCount">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" v-show="showTable" style="margin-right: 150px;">
                        <div class="pull-left line-height-34" style="width: 80px;">租金:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="number" class="form-control" placeholder="非必填" v-model="rentPrice">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" v-show="showTable">
                        <div class="pull-left line-height-34" style="width: 80px;">物业费:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="number" class="form-control" placeholder="非必填" v-model="propertyFee">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" v-show="showTable" style="margin-right: 150px;">
                        <div class="pull-left line-height-34" style="width: 80px;">商圈均价:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="number" class="form-control" placeholder="非必填" v-model="tradeZoneAvgPrice">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" v-show="showTable">
                        <div class="pull-left line-height-34" style="width: 80px;">业态:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="text" class="form-control" placeholder="非必填" v-model="businessForm">
                        </div>
                    </div>
                    <div class="clearfix pull-left" :class="{'mt-10': showTable}"
                        :style="{marginRight: showTable ? '150px' : '0px'}">
                        <div class="pull-left line-height-34" style="width: 80px;">联系人:</div>
                        <div class="pull-left clearfix" style="width: 240px;">
                            <input type="text" class="form-control pull-left" placeholder="联系人" style="width: 90px;"
                                v-model="contactName">
                            <input type="text" class="form-control pull-right" placeholder="联系电话" style="width: 140px;"
                                v-model="contactPhoneNum">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" v-show="showTable">
                        <div class="pull-left line-height-34" style="width: 80px;">竣工时间:</div>
                        <div class="pull-left" style="width: 240px;">
                            <web-calendar type="primary" v-model="buildingCompletionDate"></web-calendar>
                        </div>
                    </div>
                </div>
            </div>
            <div style="border-top: 1px dotted #ccc;width: 70%;margin: 20px 0 20px 68px;" v-show="showTable"></div>
            <div class="clearfix" v-show="showTable">
                <div class="pull-left line-height-34" style="width: 80px;">业主名称:</div>
                <div class="pull-left" style="width: 240px;">
                    <input type="text" class="form-control" placeholder="非必填" v-model="proprietorName">
                </div>
            </div>
            <div class="clearfix mt-10" v-show="showTable">
                <div class="clearfix pull-left" style="margin-right: 150px;">
                    <div class="pull-left line-height-34" style="width: 80px;">业主性质:</div>
                    <div class="pull-left" style="width: 240px;">
                        <input type="text" class="form-control" placeholder="非必填" v-model="proprietorProperty">
                    </div>
                </div>
                <div class="clearfix pull-left">
                    <div class="pull-left line-height-34" style="width: 80px;">开发商:</div>
                    <div class="pull-left" style="width: 240px;">
                        <input type="text" class="form-control" placeholder="非必填" v-model="developers">
                    </div>
                </div>
            </div>
            <div class="clearfix mt-10" v-show="showTable">
                <div class="pull-left line-height-34" style="width: 80px;">地理区位:</div>
                <div class="pull-left" style="width: 710px;">
                    <input type="text" class="form-control" placeholder="非必填" v-model="positionInfo">
                </div>
            </div>
            <div class="clearfix mt-10" v-show="showTable">
                <div class="pull-left line-height-34" style="width: 80px;">交通配套:</div>
                <div class="pull-left" style="width: 710px;">
                    <input type="text" class="form-control" placeholder="非必填" v-model="transportationFacilities">
                </div>
            </div>
            <div class="clearfix mt-10">
                <div class="pull-left line-height-34" style="width: 80px;">项目所在地:</div>
                <div class="pull-left dy-flex" style="width: 710px;">
                    <div class="select-ul mr-10" style="width: 120px;">
                        <span class="select-name br-4 box-i-shadow" ref="provinceSel">请选择省份</span>
                        <ul>
                            <li v-for="item in provinceList" @click="setProvince(item)">{{ item.name }}</li>
                        </ul>
                    </div>
                    <div class="select-ul mr-10" style="width: 120px;">
                        <span class="select-name br-4 box-i-shadow" ref="citySel">请选择城市</span>
                        <ul>
                            <li v-for="item in cityList" @click="setCity(item)">{{ item.name }}</li>
                        </ul>
                    </div>
                    <div class="select-ul" style="width: 120px;">
                        <span class="select-name br-4 box-i-shadow" ref="areaSel">请选择区县</span>
                        <ul>
                            <li v-for="item in areaList" @click="setArea(item)">{{ item.name }}</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="clearfix mt-10">
                <div class="pull-left line-height-34" style="width: 80px;">详细地址:</div>
                <div class="pull-left" style="width: 710px;">
                    <input type="text" class="form-control" v-model="address">
                </div>
            </div>
            <div class="clearfix mt-10" v-show="showTable">
                <div class="pull-left line-height-34" style="width: 80px;">项目描述:</div>
                <div class="pull-left" style="width: 710px;">
                    <textarea rows="4" class="form-control" v-model="projDesc"></textarea>
                </div>
            </div>

            <div class="mt-15 pt-15 border-t" v-if="customizeArr.length">
                <p class="color-gray" style="margin-bottom: 10px;">自定义信息</p>
                <div class="clearfix">
                    <!-- //自定义开始 -->
                    <div class="custom_container">
                        <div v-for="(item,index) in customizeArr"
                            :style="{width:(item.fieldType == 'text'?'954px':'467px'),alignItems:((item.fieldType == 'radio' || item.fieldType == 'checkbox')?'flex-start':'center')}"
                            :class="item.fieldType == 'text'?'alignItems':''">
                            <div class="custom_title">
                                <span :style="{color:item.isRequired == 'true'?'#ec4151':'#fff'}">*</span>
                                {{item.dictName}}：
                            </div>
                            <div class="custom_content" style="flex:1;">
                                <!-- 下拉单选 -->
                                <div v-if="item.fieldType == 'select'">
                                    <hl-select :data="item.selectArrCopy" v-model="item.select" type="primary" width="160"></hl-select>
                                </div>
                                <!-- 单选 -->
                                <div v-if="item.fieldType == 'radio'">
                                    <hl-radio :data="item.selectArrCopy" v-model="item.select"></hl-radio>
                                </div>
                                <!-- 多选 -->
                                <div v-if="item.fieldType == 'checkbox'">
                                    <hl-checkbox :data="item.selectArrCopy" v-model="item.select"></hl-checkbox>
                                </div>
                                <!-- 电话，邮箱 ，文本（单行）-->
                                <div v-if="item.fieldType == 'tel' ||  item.fieldType == 'email' || item.fieldType == 'input'">
                                    <input type="text" autocomplete="off" class="form-control"
                                        :maxlength="item.fieldRange" v-model="item.select"  style="width: 160px;"/>
                                </div>
                                <!-- 日期 -->
                                <div v-if="item.fieldType == 'date'" style="width: 160px;">
                                    <web-calendar v-model="item.select" type="primary"></web-calendar>
                                </div>
                                <!-- 文本 -->
                                <div v-if="item.fieldType == 'text'">
                                    <textarea name="name" style="height:130px;" class="form-control mes msgsssss"
                                        placeholder="" :maxlength="item.fieldRange" v-model="item.select"></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="border-t mt-15 pt-15">
                <div class="clearfix">
                    <div class="pull-left relative">
                        <span class="color-gray">详细信息</span>
                        <span style="color: #ccc;">（此模块内容全部是非必填项目）</span>
                    </div>
                    <div class="pull-right">
                        <a href="javascript:;" @click="detailFlag = !detailFlag">{{ detailFlag ? '收起' : '展开' }}</a>
                    </div>
                </div>
                <div class="clearfix mt-10" v-show="detailFlag">
                    <div class="clearfix pull-left" style="margin-right: 150px;">
                        <div class="pull-left line-height-34" style="width: 130px;">项目法定名称:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="text" class="form-control" v-model="projLegalName">
                        </div>
                    </div>
                    <div class="clearfix pull-left">
                        <div class="pull-left line-height-34" style="width: 130px;">项目公司全称:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="text" class="form-control" v-model="companyFullName">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" style="margin-right: 150px;">
                        <div class="pull-left line-height-34" style="width: 130px;">法人:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="text" class="form-control" v-model="legalPersonName">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10">
                        <div class="pull-left line-height-34" style="width: 130px;">项目产权人:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="text" class="form-control" v-model="projPrOwnerName">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" style="margin-right: 150px;">
                        <div class="pull-left line-height-34" style="width: 130px;">关联公司:</div>
                        <div class="pull-left" style="width: 240px;">
                            <div class="select-ul">
                                <span class="select-name br-4 box-i-shadow" ref="company">请选择</span>
                                <ul>
                                    <li v-for="item in companyArr" @click="selectCompany(item)">{{ item.shortName }}
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10">
                        <div class="pull-left line-height-34" style="width: 130px;">可出租面积:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="number" class="form-control" v-model="rentAcreage">
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10" style="margin-right: 150px;">
                        <div class="pull-left line-height-34" style="width: 130px;">土地使用权到期日:</div>
                        <div class="pull-left" style="width: 240px;">
                            <web-calendar v-model="landUseRightsExpireDate"></web-calendar>
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10">
                        <div class="pull-left line-height-34" style="width: 130px;">加入物业组合日期:</div>
                        <div class="pull-left" style="width: 240px;">
                            <web-calendar v-model="propertyAccessionDate"></web-calendar>
                        </div>
                    </div>
                    <div class="clearfix pull-left mt-10">
                        <div class="pull-left line-height-34" style="width: 130px;">权益系数:</div>
                        <div class="pull-left" style="width: 240px;">
                            <input type="number" class="form-control" v-model="rightsInterestsRates">
                        </div>
                    </div>
                </div>
                <div class="clearfix mt-10" v-if="detailFlag">
                    <div class="pull-left line-height-34" style="width: 130px;">物业概况:</div>
                    <div class="pull-left" style="width: 760px;">
                        <textarea rows="4" class="form-control" v-model="propertyProfile"></textarea>
                    </div>
                </div>
            </div>
            <div class="project-wrap-pop" v-show="flag">
                <div class="project-pop">
                    <div class="close icon-Gm-close font-16" @click="flag = !flag"></div>
                    <div class="title">重复项目</div>
                    <p>已存在项目，确认继续保存此项目？</p>
                    <div class="button-footer">
                        <div class="save-erweima cursor" @click="validate">保存</div>
                        <div class="cancel-erweima cursor" @click="flag = !flag">取消</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="submit mt-15 pt-15 border-t">
            <button type="button" class="btn n-btn-primary" @click="validate">保存</button>
        </div>
</main>
<script src="scripts/app/channel-name.js" charset="utf-8"></script>
<script src="modules/market/scripts/following.js" charset="utf-8"></script>

<style>
    .hl-radio-container li{
		margin-bottom: 10px;
	}
    .validata-customer {
        background-color: rgba(0, 0, 0, 0.5);
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .validata-control {
        width: 400px;
        border-radius: 4px;
        background-color: #fff;
        text-align: center;
        overflow: hidden;
        position: relative;
    }

    .validata-control .close {
        position: absolute;
        right: 0;
        top: 0;
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

    .validata-control h3 {
        font-size: 16px;
        color: #565e99;
        font-weight: bold;
    }

    .validata-control p {
        padding: 40px 0 53px;
    }

    .blue-button {
        background-color: #565e99;
        color: #fff;
        line-height: 50px;
    }

    .gray-button {
        background-color: #f2f2f2;
        line-height: 50px;
        color: #666
    }

    .custom_container {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .custom_container>div {
        display: flex;
        margin-bottom: 10px;
        margin-right: 20px;
    }

    .custom_title {
        padding-left: 8px;
        width: 105px;
        position: relative;
    }

    .custom_title>span {
        position: absolute;
        left: 0px;
    }

    .hl-checkbox-container ul {
        display: flex;
        align-items: center;
        flex-wrap: wrap
    }

    .hl-checkbox-container .item {
        margin-bottom: 0
    }

    .alignItems {
        align-items: flex-start !important;
    }

    input[type=number] {
        -moz-appearance: textfield;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
</style>